/* Gramophone only; BASIC slideshow/container grid and original player.js are untouched. */
.audio-card .gramophone-frame{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto 8px;overflow:hidden}
.gramophone-frame #gramophonePanel{display:block;width:100%;height:100%;object-fit:contain}
.gramophone-vinyl-cover{position:absolute;left:46%;top:40%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;pointer-events:none}
.audio-card .gramophone-vinyl-cover #trackCover{display:block;width:100%;height:100%;max-height:none;object-fit:cover;border-radius:50%;margin:0;animation:basic-cover-rotation 12s linear infinite;animation-play-state:paused}
.audio-card .gramophone-vinyl-cover #trackCover.mp3-playing{animation-play-state:running}
.gramophone-image-buttons{position:absolute;left:2.8%;bottom:9.4%;width:41%;height:9.5%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;}
.gramophone-image-buttons button{min-width:0;border:0;background:transparent;cursor:pointer;opacity:0;}
.gramophone-image-buttons button:focus-visible{opacity:1;outline:3px solid #e5c270;outline-offset:-3px;border-radius:8px}
.audio-card .custom-player-controls{display:none}
.gramophone-mobile-buttons{display:none}
@media(max-width:900px){
 .audio-card .gramophone-frame{max-width:440px}
 .gramophone-image-buttons{display:none}
 .gramophone-mobile-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;width:100%;margin:8px 0 10px}
 .gramophone-mobile-buttons button{min-width:0;min-height:74px;padding:5px 1px;border:1px solid #6c85aa;border-radius:9px;background:#263a54;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-weight:800;font-size:clamp(10px,2.8vw,14px)}
 .gramophone-mobile-buttons .gicon{font-size:clamp(26px,7vw,36px);line-height:1}
 .gramophone-mobile-buttons button:active{background:#265da0}
}

/* BASIC 15: desktop-only balance of gramophone and slideshow.
   Slideshow retains its original 19:11 aspect ratio.
   All media, playback JS and Android layout remain unchanged. */
@media (min-width:901px){
  .listening-layout{
    grid-template-columns:minmax(0,31fr) minmax(0,69fr);
    align-items:stretch;
  }
  .listening-layout > .visual-card{align-self:stretch;}
  .listening-layout > .audio-card{
    box-sizing:border-box;
    justify-content:center;
    min-height:0;
  }
  .listening-layout .audio-card .gramophone-frame{
    width:100%;
    max-width:360px;
    flex:0 0 auto;
  }
}